<template>
	<view v-if="popShow">
		<u-overlay show @click="handlePopClose">
			<view class="pop-cont bg-fff">
				<view class="flex padding">
					<view class="flex align-center">
						<image class="poster margin-right" :src="popData.img" mode=""></image>
					</view>
					<view class=" info list">
						{{popData.name}}
						<view class="margin-tb-xs">{{popData.french}}</view>
						￥{{popData.list[dropIdx].pprice}}
						<view>
							{{popData.list[dropIdx].fittings}}
						</view>
					</view>
				</view>
				<view class="padding flex justify-between u-border-bottom">
					<view class="">
						规格选择
					</view>
					<view class="drop-tit padding-left">
						<view @click.stop="dropShow=true" class="padding-left">
							{{popData.list[dropIdx].spec}}
							(
							{{popData.list[dropIdx].weight}}
							)
							~
							{{popData.list[dropIdx].edible}}
						</view>
						<view v-if="dropShow" class="drop-list bg-fff" >
							<view 
								class="padding-tb padding-left" 
								v-for="(item,index) in popData.list"
								@click.stop="handleDrop(index)"
							>
								{{item.spec}}
								(
								{{item.weight}}
								)
								~
								{{item.edible}}
							</view>
						</view>
					</view>
				</view>
				<view class="padding flex justify-between">
					<view class="">
						数量选择
					</view>
					<view class="">
						<u-number-box v-model="num" buttonSize="20"></u-number-box>
					</view>
				</view>
				<view class="flex btn-cont text-center">
					<view class="bg-brown block padding-sm">取消</view>
					<view class="bg-yellow block padding-sm" @click="handleAdd">确定</view>
				</view>
			</view>
			
		</u-overlay>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		name: "cart-pop",
		data() {
			return {
				dropShow:false,
				dropIdx:0, //记录选中的规格
				num:1,
				isEdit:false
			};
		},
		computed: {
			// popShow() {
			// 	return this.$store.state.cart.popShow
			// },
			...mapState({
				popShow:state=>state.cart.popShow,
				popData:state=>state.cart.popData,
				editIdx:state=>state.cart.editIdx
			})
		},
		watch:{
			popData(){ //区分新增弹窗、编辑弹窗
				console.log('popData数据变化了',this.editIdx);
				let {dropIdx,num} = this.popData
				if(dropIdx){
					this.dropIdx = dropIdx
					this.num = num
				}
			}
		},
		methods: {
			handlePopClose(){
				this.$store.commit('cart/popShowMut',false)
				this.dropIdx = 0
			},
			// ...mapMutations({
			// 	handleAdd:'cart/cartAddMut'
			// }),
			handleAdd(){
				let {popData,dropIdx,num} = this
				this.$store.commit('cart/cartAddMut',{
					goodsObj:{...popData,dropIdx,num}, //购物车数据包
					// isEdit  //标记新增、编辑
				})
			},
			handleDrop(idx){
				this.dropIdx = idx
				this.dropShow = false
			}
		},
		created() {
			console.log('弹窗组件created');
		}
	}
</script>

<style lang="scss">
	.pop-cont{
		position: absolute;
		top: 50%;
		left: 3%;
		width: 94%;
		transform: translateY(-50%);
	}
	.poster {
		width: 180upx;
		height: 180upx;
		background-color: #d8d8d8;
	}
	.btn-cont{
		view{
			width: 50%;
		}
	}
	.info {
		&.list {
			width: 60%;
		}

		.edit {
			width: 80upx;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			background-color: #e6e6e6;
			border-radius: 50%;

		}
	}
	.drop-tit{
		position: relative;
		.drop-list{
			position: absolute;
			top: 70upx;
			right: 0;
			width: 120%;
			box-shadow: 0 0 20upx 2upx rgba(0,0,0,0.2);
			z-index: 3;
			view{
				box-sizing: border-box;
			}
		}
	}
</style>
